<template>
  <a-list :bordered="false" :data-source="listData" class="px-4">
    <a-list-item v-for="(item, index) in listData" :key="index">
      <a-list-item-meta :title="item.title">
        <template #description>
          {{ item.description }}<a-button type="text" class="ml-1">修改</a-button>
        </template>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
</template>

<script lang="ts" setup>
  const listData = [
    {
      title: '账户密码',
      description: '绑定手机和邮箱，并设置密码，帐号更安全',
    },
    {
      title: '绑定手机',
      description: '已绑定手机号：+86189****4877',
    },
    {
      title: '密保问题',
      description: '未设置密保问题，密保问题可有效保护账户安全',
    },
    {
      title: '个性域名',
      description: '已绑定域名：https://www.naiveadmin.com',
    },
  ];
</script>
